<template>
    <el-dialog
            :close-on-click-modal="false"
            :model-value="api.createState.visible"
            :title="api.createState.title"
            destroy-on-close
            @close="api.onCloseCreate()"
    >
        <el-form
                ref="formRef"
                :model="api.createState.form"
                :rules="rules"
                label-width="120px"
                status-icon
        >

            <el-row>
                <el-col :span="12">

                    <el-form-item
                            label="组织机构名称"
                            prop="orgId"
                    >
                        <el-tree-select
                                v-model="api.createState.form.orgId"
                                :data="orgApi.treeState.data"
                                :props="{label:'name',value:'id'}"
                                :render-after-expand="false"
                                check-strictly
                                class="fill-width"
                                placeholder="请选择父级"
                        />
                    </el-form-item>

                    <el-form-item
                            label="显示名称"
                            prop="displayName"
                    >
                        <el-input
                                v-model="api.createState.form.displayName"
                                clearable
                                placeholder="显示名称"
                        />
                    </el-form-item>

                    <el-form-item
                            label="手机号"
                            prop="phone"
                    >
                        <el-input
                                v-model="api.createState.form.phone"
                                clearable
                                placeholder="手机号"
                        />
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="真实姓名"
                            prop="realName"
                    >
                        <el-input
                                v-model="api.createState.form.realName"
                                clearable
                                placeholder="真实姓名"
                        />
                    </el-form-item>
                    <el-form-item
                            label="身份证号"
                            prop="idCard"
                    >
                        <el-input
                                v-model="api.createState.form.idCard"
                                clearable
                                placeholder="身份证号"
                        />
                    </el-form-item>

                    <el-form-item
                            label="邮箱"
                            prop="email"
                    >
                        <el-input
                                v-model="api.createState.form.email"
                                clearable
                                placeholder="邮箱"
                        />
                    </el-form-item>
                    <el-form-item
                            label="性别"
                            prop="sex"
                    >
                        <i-attach-select
                                v-model:model-value="api.createState.form.sex"
                                :params="{target:'GENDER_TYPE'}"
                                auto-select
                                class="fill-width"
                        ></i-attach-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="api.onCloseCreate()">关闭</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {FormRules} from "element-plus";
import {OrgApi} from "~/api/system/org/org.api";
import {WeChatUserApi} from "~/api/wechat/user/user.api";

interface Props {
    api: WeChatUserApi;
}

const {api} = withDefaults(defineProps<Props>(), {});
const orgApi = new OrgApi(true);
const formRef = ref();
const rules = reactive<FormRules>({
    orgId: [{required: true, message: "请选择组织机构", trigger: "blur"}],
    roleId: [{required: true, message: "请选择用户角色", trigger: "blur"}],
    userType: [{required: true, message: "请选择用户类型", trigger: "blur"}],
    displayName: [{required: true, message: "请输入显示名称", trigger: "blur"}],
    phone: [{required: true, message: "请输入手机号", trigger: "blur"}],
});

async function onSubmit() {
    const values = await formRef.value.validate();
    if (values) {
        api.submit(api.createState.form).then((res: any) => {
            if (res.ok) {
                api.onCloseCreate();
            }
        });
    }
}

</script>

<style lang="scss" scoped>

</style>
